<template>
    <div class="track_item" @click="goSound">
        <div class="img">
            <img src="../../../assets/icon/common/ccc.png" alt="" class="bg">
            <img v-lazy="`https://imagev2.xmcdn.com/${img}`" alt="">
        </div>
        <div class="info">
            <div class="title">{{ title}}</div>
            <div class="count">
                <span class="author">{{ albumTitle }}</span>
                <span class="time">{{ duration}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"TrackItem",
    data(){
        return{

        }
    },
    props:{
        id:{
            type:Number
        },
        title:{
            type:String
        },
        duration:{
            type:String
        },
        img:{
            type:String
        },
        albumTitle:{
            type:String
        }
    },
    methods:{
        goSound(){
            this.$router.push('/sound/'+this.id)
        }
    }
}
</script>

<style lang="scss" scoped>
.track_item{
    padding-left: 8px;
    background-color: #f3f3f3;
    height: 60px;
    display: flex;
    align-items: center;
    .img{
        width:60px;
        height: 60px;
        position: relative;
        >img{
            width: 43px;
            height:43px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .bg{
             width: 60px;
            height:60px;
            z-index: 1000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .info{
        width: 260px;
        padding-left: 18px;
        .title{
            color: black;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 6px;
        }
        .count{
            font-size: 12px;
            color: #999;
            .author{
                margin-right: 3px;
            }
        }
    }
}
</style>

